<!-- 成员异动 -->
<template>
  <div class='call_in'>
    <!-- 成员调入 -->
    <div v-if="callInUserflag==0||callInUserflag==-1||callInUserflag==3">
      <Row :gutter="16">
        <Col span="16" class="tips">
        <Icon type="md-alert" class="tips_icon" />
        {{callInTxt}}
        </Col>
      </Row>
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="150">
        <Row :gutter="16">
          <Col span="22">
          <FormItem label="成员姓名：">
            {{tipsData.userName}}
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="16" v-if="callInUserflag!=3">
          <Col span="22">
          <FormItem label="调出案场：">
            {{tipsData.sourceCaseName}}
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="22">
          <FormItem label="调入案场：">
            {{buildingAlias||'-'}}
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="22">
          <FormItem label="成员角色：" prop="roles">
            <Select v-model="formValidate.roles" multiple placeholder="请选择"
              class="cityConfigArea_moudle_select">
              <Option v-for="item in roleIdsAttrSort" :key="item.roleId" :value="item.roleId">
                {{ item.roleName }}</Option>
            </Select>
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="22">
          <FormItem label="开始进场日期：">
            {{tipsData.executeDate?$tool.formatterDate(tipsData.executeDate):'-'}}
          </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
    <!-- 成员离职 -->
    <div v-if="callInUserflag==2">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="150">
        <Row :gutter="16">
          <Col span="22">
          <FormItem label="调出成员：">
            {{tipsData.userName}}
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="22">
          <FormItem label="成员角色：">
            {{tipsData.roleName?tipsData.roleName:'-'}}
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="22">
          <FormItem label="调出类型：">
            {{'离职'}}
          </FormItem>
          </Col>
        </Row>
        <Row :gutter="16" v-if="tipsShow">
          <Col span="20" class="tips">
          <Icon type="md-alert" class="tips_icon" />
          提示：{{tipsData.userName}}名下仍有正在服务的客户，移除案场后其名下客户将会进入公客池。
          </Col>
        </Row>
        <Row :gutter="16">
          <Col span="22">
          <FormItem label="离职日期：" prop='quitTime'>
            <DatePicker type="date" @on-change='formValidate.quitTime = $event'
              format="yyyy-MM-dd">
            </DatePicker>
          </FormItem>
          </Col>
        </Row>
      </Form>
    </div>
    <!-- 成员退回 -->
    <div class="back_reason" v-if="callInUserflag==1">
      {{tipsData.reasonForReturn||'无'}}
    </div>

    <div class="flex flex-horizontal-end btn-operate"
      v-if="callInUserflag==0||callInUserflag==-1||callInUserflag==3">
      <Button @click="handleClose">取消</Button>
      <Button v-if="callInUserflag!=3" type="success" @click="returnFun()"
        style="margin-left: 8px">退回</Button>
      <Button type="primary" @click="acceptFun()" style="margin-left: 8px">接受</Button>
    </div>
    <div class="flex flex-horizontal-end btn-operate" v-if="callInUserflag==2">
      <Button @click="handleClose">取消</Button>
      <Button type="primary" @click="submitFun()" style="margin-left: 8px">确定</Button>
    </div>
    <div class="flex flex-horizontal-end btn-operate" v-if="callInUserflag==1">
      <Button @click="getlookOverTips(tipsData)">关闭</Button>
    </div>

    <Modal v-model="returnBack" title="退回原因" @on-cancel="ReturnBackModalCancel" width="800px"
      :footerHide="true">
      <div class='return_back'>
        <Form ref="formValidateReturnBack" :model="formValidateReturnBack"
          :rules="ruleValidateReturnBack" :label-width="150">
          <Row :gutter="16">
            <Col span="22">
            <FormItem label="请填写退回原因：" prop="returnBackMess">
              <Input v-model="formValidateReturnBack.returnBackMess" :maxlength="300"
                type="textarea" :autosize="{minRows: 8,maxRows: 10}"
                placeholder="请填写退回原因"></Input>
            </FormItem>
            </Col>
          </Row>
        </Form>
        <div class="flex flex-horizontal-end btn-operate">
          <Button @click="ReturnBackModalCancel">取消</Button>
          <Button type="primary" @click="submitReturnBackFun()"
            style="margin-left: 8px">确定</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
  import teamsApi from '@/biz/buildingManagement/teams'
  export default {
    props: {
      callInUserflag: {
        type: [String, Number],
        default: null,
      },
      tipsData: {
        type: Object,
        default: () => {
          return null
        },
      },
    },
    data() {
      return {
        buildingAlias: '',
        buildingId: '',
        teamId: '',
        currentUserId: '',
        tipsShow: false,
        roleIdsAttrSort: [],
        formValidate: {
          roles: '', //成员角色
          quitTime: '',
        },
        ruleValidate: {
          roles: [
          {
            required: true,
            type: 'array',
            message: '请选择成员角色',
            trigger: 'change',
          }, ],
          quitTime: [
          {
            required: true,
            message: '请选择离职日期',
            trigger: 'change',
          }, ],
        },
        returnBack: false,
        formValidateReturnBack: {
          returnBackMess: '',
        },
        ruleValidateReturnBack: {
          returnBackMess: [
            { required: true, message: '请填写退回原因', trigger: 'change' },
          ],
        },
        jyCompile: false,
        callInTxt: ''
      }
    },
    methods: {
      //获取前台角色
      getFrontRoleinit() {
        teamsApi.getFrontRoles({ rewardShareFlag: 2 }).then((res) => {
          this.roleIdsAttrSort = res
        })
      },
      handleClose() {
        this.$emit('onClose')
      },
      //退回
      returnFun() {
        this.returnBack = true
      },
      //接收
      acceptFun() {
        this.$refs.formValidate.validate((valid) => {
          if (valid) {
            let params = {
              roles: this.formValidate.roles.join(','),
              whetherToAccept: true,
              teamId: this.teamId,
              operatorId: this.$dt.userInfo().userId,
              changeLogId: this.tipsData.changeId,
            }
            teamsApi.joinTeam(params).then((res) => {
              this.$Message.success('接收成功!')
              this.$emit('onClose')
              this.$emit('onChangeTable')
              this.$emit('addUserRatio', res)
            })
          }
        })
      },
      //确定
      submitFun() {
        this.reCustomerList().then((len) => {
          if (len) {
            this.$Modal.confirm({
              title: '请确认',
              content: '<p>' + this.tipsData.userName +
                '名下仍有正在服务的客户，关闭权限后其名下客户将会进入公客池。是否继续关闭权限？</p>',
              okText: '确定',
              cancelText: '取消',
              onOk: () => {
                this.userExitTeam()
              },
            })
          } else {
            this.userExitTeam()
          }
        })
      },
      userExitTeam() {
        this.$refs.formValidate.validate((valid) => {
          if (valid) {
            let params = {
              changeType: 2,
              executeDate: this.formValidate.quitTime,
              userId: this.tipsData.userId,
              sourceCaseId: this.buildingId,
              operatorId: this.currentUserId,
              authFlag: false
            }
            teamsApi.userExitTeam(params).then((res) => {
              this.$Message.success('移除成功!')
              this.$emit('onClose')
              this.$emit('onChangeTable')
            })
          }
        })
      },
      ReturnBackModalCancel() {
        this.returnBack = false
      },
      //退回
      submitReturnBackFun() {
        this.$refs.formValidateReturnBack.validate((valid) => {
          if (valid) {
            this.returnBack = false
            let params = {
              reasonForReturn: this.formValidateReturnBack.returnBackMess,
              whetherToAccept: false,
              operatorId: this.currentUserId,
              changeLogId: this.tipsData.changeId,
            }
            teamsApi.joinTeam(params).then((res) => {
              this.$Message.success('退回成功!')
              this.handleClose()
            })
          }
        })
      },
      // 查询顾问当前楼盘下的客户数
      reCustomerList() {
        return new Promise((resolve, reject) => {
          let params = {
            buildingId: this.buildingId,
            userId: this.tipsData.userId,
          }
          teamsApi.getCustomerPoolCountByUser(params).then((res) => {
            this.tipsShow = res > 0 ? true : false
            resolve(Number(res))
          })
        })
      },
      //退回信息查看埋点
      getlookOverTips(obj) {
        teamsApi.lookOverTips({
            changeId: obj.changeId,
            userId: this.currentUserId,
          })
          .then((res) => {
            this.handleClose()
          })
      },
      getJYCompile() {
        let params = {
          userId: this.tipsData.userId,
        }
        teamsApi.getJYCompile(params).then((res) => {
          this.jyCompile = res.jyCompile
          if (res.jyCompile) {
            this.callInTxt = `提示：调入后，${this.tipsData.userName}的编制将转入您的案场`
          } else {
            this.callInTxt = `提示：调入后，${this.tipsData.userName}将转入您的案场`
          }
        })
      }
    },
    mounted() {
      let buildMess = this.$dt.buildInfo()
      this.buildingAlias = buildMess.housesName
      this.cityName = buildMess.city
      this.buildingId = buildMess.housesId
      this.teamId = this.$dt.session.get("teamsId")
      this.currentUserId = this.$dt.userInfo().userId
      this.getFrontRoleinit()
      if (this.callInUserflag) {
        this.reCustomerList()
      }
      if (this.callInUserflag == -1) {
        this.callInTxt = `提示：调入后，${this.tipsData.userName}将支援至您的案场，其编制仍将保留在原案场`
      } else if (this.callInUserflag == 0) {
        this.getJYCompile()
      } else if (this.callInUserflag == 3) {
        this.callInTxt = `提示：调入后，${this.tipsData.userName}将转入您的案场`
      }
    },
  }
</script>
<style lang='scss' scoped>
  .call_in {
    .tips {
      text-align: center;
      margin-bottom: 15px;
      background-color: rgba(254, 252, 236, 1);
      width: auto;
      margin-left: 80px;
      line-height: 32px;

      .tips_icon {
        font-size: 20px;
        color: #0f42a7;
      }
    }

    .back_reason {
      padding-left: 30px;
      font-size: 16px;
    }
  }
</style>